<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>视频管理</title>
    <div th:replace="fragment/header::css"></div>
    <div th:replace="fragment/header::js"></div>
  <link rel="stylesheet" type="text/css" th:href="@{/js/ckplayer/css/ckplayer.css}">
  <script type="text/javascript" charset="utf-8" th:src="@{/js/ckplayer/js/ckplayer.js}"></script>
  <script>
    let player = null
  </script>
</head>
<div th:replace="fragment/model::contextPath"></div>
<body>
<div class="layui-layout layui-layout-admin site-demo-fixed" >
  <div th:replace="fragment/nav::nav"></div>
  <div class="container">
  <nav class="navbar navbar-dark ">
    <div class="container-fluid justify-content-center" >
      <form class="form-inline" th:action="@{/admin/adminReview}" method="get">
        <input name="keyWord"  class="form-control mr-sm-2" style="width: 600px" type="search" placeholder="按视频标题搜索" aria-label="Search">
        <button class="btn btn-outline-primary my-2 my-sm-0" type="submit">Search</button>
      </form>
    </div>
  </nav>
  <div>
<!--    <h2>审核</h2>-->
    <table class="table table-striped">
      <thead>
      <tr class="align-middle">
        <th scope="col" style="text-align: center" width="150px">标题</th>
        <th scope="col" style="text-align: center" width="246px">简介</th>
        <th scope="col" style="text-align: center" width="50px">封面</th>
        <th scope="col" style="text-align: center">用户</th>
        <th scope="col" style="text-align: center">状态</th>
        <th scope="col" style="text-align: center">操作</th>
      </tr>
      </thead>
      <tbody>
      <tr style="text-align: center" class="align-middle" th:each="media,mediaStatus:${reviewList}">
        <td class="align-middle" th:text="${media.mediaName}"></td>
        <td  class="align-middle" style="text-align: left" th:utext="${#strings.length(#strings.replace(media.mediaIntro,enterChar,'<br />'))>100?#strings.append(#strings.substring(#strings.replace(media.mediaIntro,enterChar,'<br />'),0,100),'...'):#strings.replace(media.mediaIntro,enterChar,'<br />')}"></td>
        <td class="align-middle" style=" width:286px;height:133px"><img th:src="@{${media.mediaCover}}" class="card-img" th:alt="${media.mediaName}" width="286" height="133"></td>
        <td  class="align-middle" th:text="${media.userName}"></td>
        <td  class="align-middle" th:text="${media.mediaStatus==1?'待审核':(media.mediaStatus == 3?'审核不通过':'')}"></td>
        <td>
          <button type="button" class="btn btn-outline-info" th:onclick="previewMedia([[${media.mediaId}]],[[${media.mediaName}]],[[${media.mediaCover}]],[[${media.mediaIntro}]],[[${media.mediaDownload}]])">审核</button>
        </td>

      </tr>
      </tbody>
    </table>
  </div>
  </div>
  <!-- Modal -->
  <div class="modal fade" id="reviewModal" tabindex="-1" aria-labelledby="reviewModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="mediaName"></h5>
          <button type="button" class="close" onclick="closeVideo()">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <input id="mediaId" type="hidden">
          <p id="mediaIntro"></p>
          <div id="mediaDownload" style="width: 463px;height: 289px"></div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-outline-secondary" onclick="closeVideo()">Close</button>
          <button type="button" class="btn btn-outline-success" onclick="reviewStatus(2)">通过</button>
          <button type="button" class="btn btn-outline-danger" onclick="showNoPass()">不通过</button>
        </div>
      </div>
    </div>
  </div>

  <!-- Modal -->
  <div class="modal fade" id="noPassModal" tabindex="-1" aria-labelledby="noPassModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="noPassModalLabel">请输入不通过原因</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <form th:action="@{/user/notice/add}" method="post" id="noPass">
            <input id="noticeMediaId" type="hidden" name="mediaId">
            <input type="hidden" name="adminId" th:value="${session.admin.adminId}">
            <div class="form-group">
              <label for="infoCause">原因</label>
              <textarea class="form-control" id="infoCause" rows="3" name="infoCause"></textarea>
            </div>
            <input type="hidden" name="infoStatus" value="0">
            <input type="hidden" name="infoType" value="2" id="infoType">
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-outline-success" onclick="reviewStatus(3)">确认原因</button>
        </div>
      </div>
    </div>
  </div>
</div>
</body>
<script>
  function previewMedia(mediaId,mediaName,mediaCover,mediaIntro,mediaDownload){
    $("#mediaId").val(mediaId)
    $("#mediaName").text(mediaName)
    $("#mediaIntro").html(mediaIntro.replaceAll("\n","<br />"))
    /*$("#mediaCover").attr("src",contextPath+mediaCover).attr("alt",mediaName).css({
      "display":"block",'width':'100%','height':'auto'
  })*/
    //调用开始
    var videoObject = {
      container: '#mediaDownload', //视频容器
      poster:contextPath+mediaCover,//封面图片
      video:contextPath+'/image/高雨诺/2.mp4'//视频地址
    };
    player = new ckplayer(videoObject)//调用播放器
/*    $("#mediaDownload").attr("src",/!*mediaDownload*!/'http://www.pi-ckplayer.com/video/1_1920x1080.mp4').css({
      "display":
      "none",'width':'100%','height':'auto'
  })*/
    player.play()
    $("#reviewModal").modal("show")
  }
  function reviewStatus(mediaStatus) {
    $("#reviewModal").modal("hide")
    $("#noPassModal").modal("hide")
    $.post(contextPath+"/admin/adminReview",{mediaId:$("#mediaId").val(),mediaStatus},function () {
      if(mediaStatus === 3){
        $("#infoType").val("2")
      }else{
        $("#infoType").val("1")
      }
      $("#noticeMediaId").val($("#mediaId").val())
      $("#noPass").submit();
      // window.location.reload()
    })
  }
  function showNoPass() {
    $("#noPassModal").modal("show")
    $("#noticeMediaId").val($("#mediaId").val())
  }
  function closeVideo(){
    $("#reviewModal").modal("hide")
    player.pause()
  }
</script>
</html>